<script setup>
import{ ref } from 'vue'
import axios from 'axios';
import { getApi, postApi,searchData } from '@/axios/http.js'

const articleList = ref([]);
// const url = "article/pageList";
// const params={
//     "pageSize":10,
//     "pageNum":1
// };
//先用postman请求后台登陆接口获取到token值，在赋值给Authorization
// axios.get(url,{params:params}).then(result =>{
//     console.log(result);
//     articleList.value = result.data
// }).catch(err=>{
//     console.log(err)
// });
const params= {
    pageSize:10,
    pageNum:1,
    categoryName:"",
    state:""
}; 
async function  getArticleList(){
const url = "article/pageList";
  await getApi(url,params).then(res=>{
    if(0===res.code){
        articleList.value = res.data.items
    }
}).catch(err=>{
    console.log(err);
});
}
getArticleList();

const search = async function(){
    let res = await searchData("article/search",params);
    articleList.value = res.data.items;
}

</script>
<template>
    <div>
        文章分类：<input type="text" v-model.trim="params.categoryName"/>
        发布状态：<input type="text" v-model.trim="params.state"/>
        <button  v-on:click="search">搜索</button>
        <br/>
        <br/>
        <table border="1 solid" colspan="0" cellspacing="0">
            <thead>
                <tr>
                    <th>文章标题</th>
                    <th>分类</th>
                    <th>发表时间</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(article ,index) in articleList">
                    <td>{{ article.title }}</td>
                    <td>{{ article.categoryName }}</td>
                    <td>{{ article.createTime }}</td>
                    <td>{{ article.state }}</td>
                    <td>
                        <button>编辑</button>
                        <button>删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

</template>